<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation-fill-mode</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="../../styles/normalize.css" />
    <style type="text/css">
      .box {
        background-color: rebeccapurple;
        border-radius: 10px;
        width: 100px;
        height: 100px;
      }
      .box.start-move {
        animation-fill-mode: forwards;
        animation-delay: 1s;
        animation-name: move-right, color;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-iteration-count: 3;
      }
      .g-father {
        width: 400px;
        height: 100px;
        border: 1px solid #000;
      }
      .g-box {
        width: 100px;
        height: 100px;
        background: #333;
        animation: move 4s linear;
        animation-delay: 1s;
        /* 暂停 表示动画已经开始了， */
        /* animation-play-state: paused; */
        transform: translate(0, 0);
      }

      @keyframes move-right {
        0% {
          margin-left: 10px;
        }
        100% {
          margin-left: calc(100% - 100px);
        }
      }
      @keyframes color {
        0% {
          color: green;
        }
        100% {
          color: green;
        }
      }
      @keyframes move {
        0% {
          transform: translate(100px, 0);
        }
        100% {
          transform: translate(300px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="box" style="color: red">a</div>
    <button id="btn">start move</button>
    <div class="g-father">
      <div class="g-box"></div>
    </div>
    <script>
      /**
       * 动画过程中
       * animation-fill-mode:
       *  none: 默认，动画第一帧是 元素原本所在位置，和from无关， 动画最后一帧也是 元素原本所在位置，和to无关
       *  backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在 `animation-delay` 期间保留此值，
       *  forwards： 目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于 animation-direction和animation-iteration-count
       *  both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
       */
      $(document).ready(function () {
        $("#btn").on("click", function () {
          $($(".box")[0]).addClass("start-move");
          $($(".box")[0]).on("animationstart", function (ev) {
            console.log("animationstart");
            console.log(ev);
          });
          // $($(".box")[0]).on("animationend", function () {
          //   $($(".box")[0]).removeClass("start-move");
          //   console.log("animationend");
          // });
        });
      });
    </script>
  </body>
</html>
